<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="${request.getContextPath()}/downTimes/downTimes"
          method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="reportList"/>
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="downTimesExcel"/>
            <input name="sort" type="radio" checked value="D" <g:if test="${sort == 'D'}">checked="checked"</g:if>/>
            <label>从高到低</label>
            <input name="sort" type="radio" value="A" <g:if test="${sort == 'A'}">checked="checked"</g:if>/>
            <label>从低到高</label>
            <label>时间段：</label>
            <input type="text" name="startTime" readonly="readonly" value="${startTime}"
                   data-pattern="yyyy-MM-dd HH:mm" data-toggle="datepicker" data-rule="required"
                   placeholder="FROM">
            <input type="text" name="endTime" readonly="readonly" value="${endTime}" data-pattern="yyyy-MM-dd HH:mm"
                   data-toggle="datepicker" placeholder="TO" data-rule="required">

            <label>Location：</label>
            <g:select name="location" from="${locationList}" class="selectpicker" data-live-search="true"
                      data-live-search-placeholder="查找" noSelection="['': '===请选择===']"
                      data-toggle="selectpicker" optionKey="location" optionValue="location" value="${location}"/>
            <br>
            <label>groupType：</label>
            <g:select name="groupType" from="${groupTypeList}" class="selectpicker" data-live-search="true"
                      data-live-search-placeholder="查找" noSelection="['': '===请选择===']"
                      data-toggle="selectpicker" optionKey="group_type" optionValue="group_type" value="${groupType}"/>

            <label>设备类型：</label>
            <g:select name="eqpType" from="${eqpTypeList}" data-toggle="selectpicker" data-live-search="true"
                      optionKey="label" optionValue="value" value="${eqpType}" data-nextselect="#monEqpid" data-width="200"
                      data-refurl="${request.getContextPath()}/JsonData/getOptionHTMLByTarget?eqpType={value}&SYS_QUERY_NAME=eqpidList"
                      noSelection="['': '===请选择===']" id="monEqpType"/>

            <label>设备编号：</label>
            <g:select name="eqpid" from="${eqpidList}" data-toggle="selectpicker" data-live-search="true"
                      optionKey="label" optionValue="value" value="${eqpid}" id="monEqpid" data-width="200"
                      noSelection="['': '===请选择===']"/>



            <button type="submit" class="btn-default" data-icon="search">查询</button>
        </div>
    </form>
</div>

<div class="bjui-pageContent tableContent">
    <g:if test="${chartList.size() > 0}">
        <div id="downTimes" style="width:100%;height:80%;"></div>

        <script type="text/javascript" src="${request.getContextPath()}/js/echarts/echarts.min.js"></script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('downTimes'));
            var contextPath = "${request.getContextPath()}";
            var data = [];
            <g:each in="${chartList}" status="i" var="chart">
            data.push('${chart.ITEM_X}')
            </g:each>

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '设备当机现象次数排名'
                },
                legend: {
                    data: ['宕机现象']
                },
                toolbox: {
                    show: true,
//                    orient: 'vertical',
//                    left: 'right',
//                    top: 'center',
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {
                    data: data,
                    axisLabel: {
                        interval: 0,
                        rotate: 30
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '次',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        show: true
                    }
                ],
                series: [
                    {
                        name: '宕机现象',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true, color: 'red', position: 'top',
                                    textStyle: {
                                        color: 'black'
                                    }
                                }
                            }
                        },
                        data:${chartList.ITEM_Y}
                    }]
            };
            // 使用刚指定的配置项和数据显示图表。
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        </script>
    </g:if>
</div>
